<!DOCTYPE html>
<!-- class selector ( 俗称 类选择器 ) -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Class selectors</title>

        <style type="text/css">
            /* type selector */
            div { border: 1px solid red ; height: 50px ; }

            /* attribute selector */
            [class] { border-color: blue ; margin-bottom: 15px ; }

            /* attribute selector */
            [class~=odd] { /* 选择拥有 class 属性 且 class 属性取值包含 odd 的元素 */
                background-color: #dedede ;
            }

            /* class selector : 根据 class name 选择元素 */
            /* class selector 以 英文的 小圆点 为前缀，其后紧跟 class name */
            .even { /* 选择拥有 class 属性 且 class 属性取值 包含 even 的元素 */
                background-color: #ff0 ;
            }
        </style>

    </head>
    <body>

        <!-- 同一个元素 的 class 属性取值中可以包含多个 class name  -->
        <div class="odd first"></div>
        <!-- 若某个元素的 class 拥有多个 class name ， 则 多个 class name 之间使用空格隔开 -->
        <div class="even second"></div>
        <!-- 同一个元素的 class 取值中的多个 class name 在 JavaScript 对应一个 列表 (classList) -->
        <div class="odd third"></div>

        <div class="even fourth"></div>

        <div class="odd fifth"></div>

        <div class="even sixth"></div>
        
    </body>
</html>